<template>
	<view class="item" @click="goDetail()">
		<image class="avatar" :src="getCompressListImage(item.photo)" mode="aspectFill"></image>
		<view class="info">
			<view class="flex-row">
				<view class="name">{{ item.name }}</view>
				<!-- <view class="service-times">服务次数：{{ item.serviceTimes }}</view> -->
				<view class="star-box flex-1"><uni-rate :readonly="true" :size="12" :margin="3" :value="item.level"
						:allow-half="true"></uni-rate></view>
			</view>
			<view class="brief doubleline">{{ item.introduction }}</view>
		</view>
		<view v-if="isSelect" class="btn">预约Ta</view>
	</view>
</template>

<script>
	export default {
		name: 'escort-item',
		props: {
			isSelect: {
				type: [Boolean, String],
				defaultValue: false
			},
			item: {
				type: Object,
				defaultValue: {}
			}
		},
		data() {
			return {};
		},
		methods: {
			goDetail() {
				if (this.isSelect) {
					this.$emit('click', this.item);
				} else {
					uni.navigateTo({
						url: '/pages/IndexPages/chaperoneDetails?id=' + this.item.id
					});
				}
			},
			getCompressListImage(url) {
				return url ? url + '?x-oss-process=image/resize,w_150' : '/static/images/ic_img.png'
			}
		}
	};
</script>

<style lang="scss" scoped>
	.flex-row {
		display: flex;
		align-items: center;
	}
	.flex-1 {
		flex: 1;
	}
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30upx;
		border-bottom: 1upx solid #f4f4f5;

		.avatar {
			flex-shrink: 0;
			margin-right: 18upx;
			width: 140upx;
			height: 140upx;
			border-radius: 10upx;
			border: 1upx solid #f5f7f8;
		}

		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				color: #333333;
				font-size: 30upx;
				font-weight: 500;
			}

			.star-box {
				margin: 5upx 0 5upx 10upx;
			}

			.service-times {
				margin-top: 5rpx;
				font-size: 24rpx;
				color: #666666;
			}

			.brief {
				min-height: 60upx;
				line-height: 30upx;
				color: #666666;
				font-size: 24upx;
			}
		}

		.btn {
			flex-shrink: 0;
			width: 120upx;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			color: white;
			font-size: 24upx;
			background: $uni-color-primary;
			border-radius: 30upx;
		}
	}
</style>